<template>
  <div class="login-tenant">
    <div class="login-form">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
      <el-input v-model="confirmPassword" type="password" placeholder="请再次确认密码"></el-input>
      <el-alert v-if="error" type="error" :closable="false">{{ error }}</el-alert>
      <el-alert v-if="success" type="success" :closable="false">{{ success }}</el-alert>
    </div>
    <el-button type="primary" @click="register">注册</el-button>
  </div>
</template>

<script>
import AxiosMethods from '@/util/AxiosMethods';
export default {
data() {
  return {
    username: '',
    password: '',
    confirmPassword: '',
    error: '',
    success: '',
  }
},
methods: {
  async register() {
    // 检查密码和确认密码是否一致
    if(this.password !== this.confirmPassword) {
      this.error = '两次输入的密码不一致';
      this.success = '';
      return;
    }

    const params={
      username: this.username,
      password: this.password,
    };
    try{
      const res = await AxiosMethods.post('/user/register', params);
      if(res.data.code === 1){
        this.success = '注册成功，请登录';
        this.error = '';
        this.$store.commit('User/UserRegister', params);
      }else{
        this.error = res.data.msg;
        this.success = '';
      }
    }catch(err){
      console.log(err);
      this.error = '注册失败，请稍后再试';
      this.success = '';
    }
  }
},
}
</script>

<style scoped>
.login-tenant {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.login-form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.el-input {
width: 300px;
margin-bottom: 15px;
}

.el-button {
width: 300px;
}
</style>
